<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		     学习主题：针对页面操作较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数使用
			 基础函数----事件源之后出现，事件源语法糖中
			 html()   作用：增加一个元素，覆盖原有html
			 val()    作用：针对input元素，实现修改文本框内容
			 text()   作用：生成为本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eligendi dolorem vitae ratione quibusdam expedita porro quo! Consequatur doloremque, odio ab, explicabo fuga eos possimus quos, magni eaque sunt odit!</p>
		 
		 <div style="width: 200px; height: 200px; background: #000;"></div>
		 <h3>Lorem</h3>
		 
		 <input type="button" value="按钮2" />
		 <input type="text" value="输入框可以直接写入文本" />
		 
		<script>
			$("button").click(function(){
				//JQ操作DOM---html()函数使用
				$("p").html("<h1>JQ操作DOM---html()函数使用</h1>");
			}); 
			
			/*练习：div 200*200 背景颜色自定，鼠标滑过之后，
			下面内容修改：<h3>提示：修改为自定颜色
			*/
		   $("div").mouseenter(function(){
			   $("h3").html("<h3>黄</h3>");
		   });
		   
		    /*练习：按钮  文本框    点击按钮 文本增加一行文本*/ 
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改");
			});
			/*利用JQ操作DOM(页面效果) ：1.元素内容操作(3个函数)
			                            html()元素+文本
										val()
										text()文本
			                           2.元素属性操作(4个函数)
									   <P align="center">
									   attr()
									   removeAttr()
									   <input checked>
									   prop()
									   removeProp()
									   3.样式类名操作(4个函数)
									   .demo{属性：属性值..}
									   addClass()
									   removeClass()
									   toggleClass()
									   hasClass()
									   4.元素样式操作(5个函数)
									   css()
									   语法：css("css属性","css属性值")
									               display    none/block
										$("选择器")attr().addClass()
										width()和height()
										outerWidth()和outerHeight()
									   5.插入和删除操作(7个函数)
									   append()和prepend()
									   after()和before()
									   remove()和empty()
									   replaceWith()
									   6.元素遍历操作(6个函数)
									   7.JQ动画操作(7个函数)
									   -
			*/
		</script>
	</body>
</html>